<template>
    <div class="home-page">
      <!-- Banner 轮播 -->
      <div class="banner-wrapper">
        <UNavigationMenu :items="bannerItems" variant="pill" class="banner" />
      </div>
  
      <!-- 产品列表 -->
      <section class="product-section">
        <h2 class="section-title">我们的产品</h2>
        <div class="product-list">
          <div v-for="(product, index) in products" :key="product.id" class="product-item">
            <div class="product-card">
              <img :src="product.imageUrl" alt="产品图" class="product-image" />
              <div class="product-info">
                <h3 class="product-name">{{ product.name }}</h3>
                <p class="product-description">{{ product.description }}</p>
                <NuxtLink :to="product.link" class="product-link">了解更多</NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </section>
  
      <!-- 新闻列表 -->
      <section class="news-section">
        <h2 class="section-title">最新新闻</h2>
        <div class="news-list">
          <div v-for="(news, index) in newsList" :key="news.id" class="news-item">
            <div class="news-card">
              <img :src="news.imageUrl" alt="新闻图" class="news-image" />
              <div class="news-info">
                <h3 class="news-title">{{ news.title }}</h3>
                <p class="news-description">{{ news.description }}</p>
                <NuxtLink :to="news.link" class="news-link">阅读更多</NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useProducts, useNews } from '~/composables/api';
  const products = ref<any[]>([]); // 指定更精确的类型替代 any
const newsList = ref<any[]>([]);
  // Banner 数据
  const bannerItems = ref([
    {
      label: 'Banner 1',
      icon: 'https://www.aodes.com/wp-content/uploads/2024/12/WorkCross-1000-6-HVAC-Com.jpg',
      to: '#',
    },
    {
      label: 'Banner 2',
      icon: 'i-lucide-image',
      to: '#',
    },
    {
      label: 'Banner 3',
      icon: 'i-lucide-image',
      to: '#',
    },
  ]);
  

  
  onMounted(async () => {
    // 获取产品数据
     products.value  = await useProducts();
    
    // 获取新闻数据
    newsList.value  = await useNews();
    });
  </script>
  
  <style scoped>
  .home-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* Banner 轮播 */
  .banner-wrapper {
    width: 100%;
    height: 400px;
    background-color: #f0f0f0;
    margin-bottom: 40px;
  }
  
  .banner {
    height: 100%;
    transition: transform 0.3s ease-in-out;
  }
  
  /* 产品列表 */
  .product-section {
    margin-bottom: 40px;
  }
  
  .section-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .product-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .product-item {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  
  .product-item:hover {
    transform: translateY(-10px);
  }
  
  .product-card {
    display: flex;
    flex-direction: column;
    padding: 15px;
  }
  
  .product-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .product-info {
    margin-top: 15px;
  }
  
  .product-name {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .product-description {
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
  }
  
  .product-link {
    font-size: 1rem;
    color: #007bff;
    text-decoration: none;
  }
  
  .product-link:hover {
    text-decoration: underline;
  }
  
  /* 新闻列表 */
  .news-section {
    margin-bottom: 40px;
  }
  
  .news-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .news-item {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
  }
  
  .news-item:hover {
    transform: translateY(-10px);
  }
  
  .news-card {
    display: flex;
    flex-direction: column;
    padding: 15px;
  }
  
  .news-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .news-info {
    margin-top: 15px;
  }
  
  .news-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .news-description {
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
  }
  
  .news-link {
    font-size: 1rem;
    color: #007bff;
    text-decoration: none;
  }
  
  .news-link:hover {
    text-decoration: underline;
  }
  </style>